<template>
  <div class="dialog">
    <el-dialog
      :visible.sync="dialogVisible"
      width="580px"
      append-to-body
      :modal="true"
      @close="closeDialog"
    >
      <span slot="title" class="dialog-title">{{ dialogTitle }}</span>
      <div v-loading="loading" class="dialogBody">
        <el-form ref="mealForm" :model="mealForm" size="mini">
          <div>
            <p>
              <span class="showCount"></span>
              <span class="showCount"></span>
              <span class="showCount">全部追加</span>
              <el-input v-model="addCount" oninput="value=value.replace(/[^\d]/g,'')" class="inputCount"></el-input>
            </p>
            <ul>
              <li v-for="item of list" :key="item.bomId">
                <span class="showCount">{{ item.bomName }}</span>
                <span class="showCount">当前库存：{{ item.remaining }}套</span>
                <span class="showCount">累计消耗：{{ item.grandTotal }}</span>
                <el-input v-model="item.addCount" oninput="value=value.replace(/[^\d]/g,'')" class="inputCount" placeholder="追加数量"></el-input>
              </li>
            </ul>
          </div>
          <el-form-item class="btn">
            <el-button type="primary" @click="submitForm('mealForm')">保存</el-button>
            <el-button @click="resetForm('mealForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { query, addRemaining } from '@/api/bom';
export default {
  components: {},
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '增加库存',
      list: [], // 所有物料
      addCount: null,
      mealForm: {},
      loading: false
    };
  },
  watch: {
    addCount(newVal, oldVal) {
      this.list.forEach(e => {
        e.addCount = newVal;
      });
    }
  },
  methods: {
    isShow() {
      this.loading = true;
      this.dialogVisible = true;
      query().then(res => {
        res.forEach(e => {
          e.addCount = null;
        });
        this.list = res;
        this.loading = false;
      }).catch(er => {
        this.loading = false;
      });
    },
    // 关闭弹窗
    closeDialog() {
      this.resetForm();
    },
    // 取消
    resetForm(mealForm) {
      this.addCount = null;
      this.list = [];
      this.dialogVisible = false;
    },
    // 提交
    submitForm(mealForm) {
      const _list = this.list.filter(item => { return item.addCount && item.addCount.trim(); });
      if (_list.length) {
        const dtos = _list.map(item => { return { addCount: item.addCount, bomId: item.bomId }; });
        addRemaining(dtos).then(res => {
          this.$notify.success('库存增加成功');
          this.resetForm();
          this.$emit('addBomSuccess');
        }).catch(er => {});
      } else {
        this.$notify.warning('请填写需要增加的库存');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
>>> .el-dialog{
  margin-top: 5vh !important;
}
.inputCount{
  display: inline-block;
  width: 16%;
}
p{
  margin: 0;
  padding: 8px 0;
}
ul{
  padding: 10px 0;
  margin: 0;
  li{
    list-style: none;
    padding: 5px 0;
  }
}
.showCount{
  width: 27%;
  display: inline-block;
}
.btn{
  >>> .el-form-item__content{
    margin: 0 auto !important;
    text-align: center;
  }
}
</style>
